import React, { Component } from "react";
import { Nav, Navbar } from "react-bootstrap";
import Home from "./Home";
import SchInfo from "./school/Info";
import SchTeacher from "./school/Teacher";
import SchCsp from "./school/Consumption";
import SchScore from "./school/Score";
import SchAttendance from "./school/Attendance";
import ClassPortrait from "./class/ClassPortrait";
import StuPortrait from "./student/Student";
import AppImproveScore from "./application/ImproveScore";
import AppPoverty from "./application/PovertyHelper";
import App3In7 from "./application/3In7";
import AppDetail from "./application/Detail";
import "bootstrap/dist/css/bootstrap.min.css";
//mport "../css/main.css";
import "../css/main1.css";
import "../css/chunk.css";

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      whichShow: "home",
      menuShow: true,
      switchButtonState: false,
    };
    this.menu = [
      {
        header: "学校层面",
        // body: [
        //   "基本信息统计",
        //   "师资分配情况",
        //   "成绩统计分析",
        //   "考勤信息统计",
        //   "消费信息统计",
        // ],
        body: ["基本信息统计", "师资分配情况", "成绩统计分析"],
        content: [
          <SchInfo />,
          <SchTeacher />,
          <SchScore />,
          <SchAttendance />,
          <SchCsp />,
        ],
      },
      {
        header: "班级层面",
        body: ["班级画像"],
        content: [<ClassPortrait />],
      },
      {
        header: "学生层面",
        body: ["学生画像"],
        content: [<StuPortrait />],
      },
      {
        header: "应用层面",
        // body: ["提升学生成绩", "贫困生帮扶", "七选三推荐系统", "全域数据查询"],
        body: ["提升学生成绩"],
        content: [
          <AppImproveScore />,
          <AppPoverty />,
          <App3In7 />,
          <AppDetail />,
        ],
      },
    ];
    this.animation = {
      slideLeft: {
        animation: "slideLeft 320ms ease 0s 1 normal forwards running",
      },
      slideRight: {
        animation: "slideRight 320ms ease 0s 1 normal forwards running",
      },
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(idx) {
    if (idx !== "home") {
      // 返回首页不需要隐藏菜单栏
      const menuShow = !this.state.menuShow;
      const switchButtonState = !this.state.switchButtonState;
      this.setState({
        menuShow: menuShow,
        switchButtonState: switchButtonState,
      });
    }
    if (typeof idx === "string") {
      // 区分是点击菜单栏还是点击的按钮
      this.setState({ whichShow: idx });
    }
  }
  getContent() {
    if (this.state.whichShow === "home") {
      // 渲染首页
      return <Home />;
    }
    // 如果不是首页则根据索引渲染
    const numbers = this.state.whichShow.split("-");
    const n1 = parseInt(numbers[0]);
    const n2 = parseInt(numbers[1]);
    const temp = this.menu[n1].content[n2];
    return (
      <React.Fragment>
        <Head pretitle={this.menu[n1].header} title={this.menu[n1].body[n2]} />
        {temp === undefined ? <div>索引错误</div> : temp}
      </React.Fragment>
    );
  }
  render() {
    return (
      <React.Fragment>
        <div className="wrapper">
          <SwitchButton
            state={this.state.switchButtonState}
            click={this.handleClick}
            animation={this.animation}
          />
          <MenuBar
            menu={this.menu}
            default={this.state.whichShow}
            click={this.handleClick}
            show={this.state.menuShow}
          />
          <div className="main">
            <div
              className="content"
              style={
                this.state.menuShow & (this.state.whichShow === "home")
                  ? this.animation.slideRight
                  : this.animation.slideLeft
              }
            >
              {this.getContent()}
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

function MenuBar(props) {
  const slideLeftShow = {
    animation: "slideLeft-hide 320ms ease 0s 1 normal forwards running",
  };
  const slideRightHide = {
    animation: "slideRight-show 320ms ease 0s 1 normal forwards running",
  };
  return (
    <Navbar style={props.show ? slideRightHide : slideLeftShow}>
      <div className="brand">
        <i
          className="cursor-pointer"
          onClick={() => {
            props.click("home");
          }}
        >
          数智教育
        </i>
      </div>
      <Nav
        as="ul"
        className="flex-column menu"
        onSelect={(k) => props.click(k)}
      >
        {props.menu.map((items, index) => {
          return (
            <SingleNav
              key={index}
              idx={index}
              header={items.header}
              body={items.body}
            />
          );
        })}
      </Nav>
    </Navbar>
  );
}

function SingleNav(props) {
  const svgArr = [
    [
      // 信息
      <svg
        className="icon mr-3"
        width="16px"
        height="16.00px"
        viewBox="0 0 1024 1024"
      >
        <path
          d="M758.943706 967.576661H261.815193c-101.949064-0.122128-184.554862-82.699743-184.705175-184.630019v-563.01211C77.222752 117.976073 159.847339 35.342092 261.815193 35.229358h497.128513c101.977248 0.075156 184.648807 82.709138 184.761542 184.69578v563.01211c-0.216073 101.930275-82.831266 184.498495-184.761542 184.639413zM261.815193 87.998239c-72.844917 0.075156-131.870532 59.100771-131.945688 131.936293v563.01211c0.150312 72.779156 59.157138 131.729615 131.945688 131.804771h497.128513c72.779156-0.075156 131.776587-59.025615 131.936294-131.804771v-563.01211c-0.08455-72.835523-59.100771-131.861138-131.936294-131.936293H261.815193z"
          fill="#ffffff"
        />
        <path
          d="M696.78033 193.517211H585.436771c-58.217688 0.112734-105.349872 47.301284-105.425028 105.518972v83.094312c0.037578 58.245872 47.179156 105.462606 105.425028 105.57534h111.343559c58.170716 0 105.509578-47.329468 105.584734-105.57534v-83.094312c-0.075156-58.274055-47.320073-105.481394-105.584734-105.518972z m52.825248 188.613284a52.834642 52.834642 0 0 1-52.825248 52.825248H585.436771c-28.991413 0-52.693725-23.702312-52.693725-52.825248v-83.094312a52.834642 52.834642 0 0 1 52.693725-52.759486h111.343559a52.825248 52.825248 0 0 1 52.825248 52.759486v83.094312zM348.066055 246.276697H246.192147a26.417321 26.417321 0 1 1 0-52.759486h101.883303a26.389138 26.389138 0 1 1-0.009395 52.759486zM348.066055 435.406679H246.192147a26.398532 26.398532 0 1 1 0-52.759486h101.883303a26.389138 26.389138 0 1 1-0.009395 52.759486zM775.957138 624.564844H246.192147a26.417321 26.417321 0 0 1-0.037578-52.834642h529.811963a26.407927 26.407927 0 1 1 0.028184 52.834642h-0.037578zM585.436771 813.657248H246.192147a26.417321 26.417321 0 1 1 0-52.759487h339.254018a26.407927 26.407927 0 1 1-0.009394 52.759487z"
          fill="#ffffff"
        />
      </svg>,
      // 教师
      <svg
        className="icon mr-3"
        width="16px"
        height="16.00px"
        viewBox="0 0 1024 1024"
      >
        <path
          d="M272.128 538.752l207.36 409.472H204.736c-31.488-1.152-57.728-12.224-78.72-33.28s-32.064-47.232-33.28-78.72v-185.472c1.152-31.488 12.224-57.728 33.28-78.72s47.232-32.064 78.72-33.28h67.392z m88.768-414.784c38.784-39.104 87.616-59.52 146.56-61.248 58.944 1.728 107.776 22.144 146.56 61.248 38.784 39.104 59.072 87.808 60.8 146.112-0.576 37.952-9.92 72.64-28.032 104.128s-43.456 56.576-76.096 75.264c-32.704 18.688-67.072 28.032-103.232 28.032-36.16 0-70.592-9.344-103.232-28.032-32.704-18.688-58.048-43.776-76.096-75.264-18.112-31.488-27.456-66.176-28.032-104.128 1.728-58.304 22.016-107.008 60.8-146.112z m241.984 532.928l-95.36 201.28-95.36-201.28 95.36-83.968 95.36 83.968z m286.976-84.928c21.568 20.992 34.112 47.232 37.632 78.72v185.472c-0.576 31.488-11.52 57.728-32.832 78.72-21.312 20.992-47.68 32.064-79.168 33.28H540.736l202.112-409.472h67.392c31.488 1.216 58.048 12.288 79.616 33.28z"
          fill="#ffffff"
        />
      </svg>,
      // 成绩
      <svg
        className="icon mr-3"
        width="16px"
        height="16.00px"
        viewBox="0 0 1024 1024"
      >
        <path
          d="M993 1024H32.2c-17.7 0-32-14.3-32-32V35c0-17.7 14.3-32 32-32s32 14.3 32 32v925H993c17.7 0 32 14.3 32 32s-14.3 32-32 32z"
          fill="#ffffff"
        />
        <path
          d="M188.1 738.4c-6.7 0-13.5-2.1-19.3-6.5-14.1-10.7-16.9-30.7-6.3-44.8l243.8-322.9c5.2-6.9 13-11.4 21.6-12.5 8.6-1.1 17.2 1.4 24 6.8l213.5 170.8 301.8-358.7c11.4-13.5 31.6-15.3 45.1-3.9s15.3 31.6 3.9 45.1L694.4 594.4c-11.2 13.3-30.9 15.2-44.5 4.4L437.7 429l-224 296.6c-6.3 8.4-15.9 12.8-25.6 12.8z"
          fill="#ffffff"
        />
      </svg>,
      // 考勤
      <svg
        className="icon mr-3"
        width="16px"
        height="16.00px"
        viewBox="0 0 1024 1024"
      >
        <path
          d="M701.582 500.827L448.168 763.868 320.563 623.551c-11.799-12.976-31.883-13.932-44.86-2.128-12.975 11.8-13.928 31.883-2.128 44.858l143.942 158.283c6.268 6.891 14.868 10.391 23.503 10.391 2.705 0 5.413-0.352 8.053-1.042a31.89 31.89 0 0 0 5.786 0.532c8.325 0 16.64-3.255 22.873-9.723L747.32 544.891c12.169-12.629 11.794-32.733-0.837-44.901-12.631-12.168-32.735-11.794-44.901 0.837z m191.145-308.668H765.971V95.646c0-17.538-14.218-31.756-31.756-31.756s-31.756 14.217-31.756 31.756v96.514H317.826V96.145c0-17.538-14.217-31.756-31.756-31.756-17.538 0-31.756 14.217-31.756 31.756v96.014H129.905c-36.49 0-66.176 29.736-66.176 66.287v634.053c0 36.55 29.686 66.287 66.176 66.287h762.822c36.491 0 66.179-29.737 66.179-66.287V258.446c0-36.55-29.688-66.287-66.179-66.287z m-762.822 63.408h762.822c1.528 0 2.769 1.293 2.769 2.879v125.239H127.138V258.446c0-1.586 1.241-2.879 2.767-2.879z m762.822 639.81H129.905c-1.527 0-2.768-1.291-2.768-2.878V447.197h768.359V892.5c0 1.587-1.241 2.877-2.769 2.877z"
          fill="#ffffff"
        />
      </svg>,
      // 消费
      <svg
        className="icon mr-3"
        width="16px"
        height="16.00px"
        viewBox="0 0 1024 1024"
      >
        <path
          d="M809.088038 956.901253 215.589779 956.901253c-3.00922 0-5.978508-0.12901-8.922199-0.504779-2.313997-0.235495-5.022193-0.676793-7.705815-1.221504-3.204783-0.716725-5.953935-1.462118-8.573052-2.352905-2.162461-0.656315-4.865537-1.702733-7.530729-2.904783-2.443007-1.092493-4.925947-2.352905-7.329022-3.750518-2.092836-1.181572-4.451885-2.683622-6.718783-4.300348-2.118434-1.462118-4.32185-3.230381-6.395233-5.062124-1.852222-1.593177-3.775092-3.42492-5.673388-5.41332-1.852222-1.938228-3.598982-4.010587-5.301715-6.148474-1.592153-2.006829-3.139254-4.215365-4.646424-6.524243-1.397613-2.207512-2.728673-4.651544-4.036184-7.16008-1.266555-2.42253-2.311949-4.776458-3.338913-7.200012-1.241982-3.139254-2.137888-5.757347-2.904783-8.441994-0.715701-2.358024-1.436521-5.23721-1.98328-8.226976-0.49966-2.574066-0.940957-5.41332-1.201026-8.355987-0.260069-2.619117-0.436178-5.543354-0.436178-8.492164L132.893054 242.172076c0-2.965193 0.175086-5.888406 0.459728-8.72766 0.235495-2.683622 0.651196-5.517757 1.19693-8.357011 0.501707-2.748127 1.247101-5.672364 2.11741-8.487045 0.611264-2.248468 1.50717-4.820486 2.508537-7.35462 1.241982-2.963145 2.293519-5.302739 3.42492-7.546088 1.462118-2.773725 2.794203-5.171681 4.341304-7.510251 1.357681-2.092836 2.924237-4.341304 4.625946-6.498646 1.638228-2.053928 3.319459-4.036184 5.087722-5.914003 2.158365-2.202393 4.081235-4.080212 6.127997-5.84745 1.723211-1.527648 3.950177-3.275432 6.264174-4.911612 1.943348-1.372016 4.166219-2.813657 6.543697-4.186696 2.468605-1.441641 4.912636-2.663144 7.400695-3.775092 2.529014-1.110923 5.037551-2.092836 7.63619-2.944715 2.749151-0.895906 5.432774-1.637204 8.136874-2.208536 2.748127-0.585667 5.521852-1.046418 8.355987-1.351538 2.794203-0.280547 5.633456-0.436178 8.487045-0.436178l55.513403 0c12.066573 0 21.820173 9.774078 21.820173 21.820173 0 12.043023-9.7536 21.821197-21.820173 21.821197l-55.513403 0c-1.326965 0-2.658025 0.065529-3.969631 0.19454-1.262459 0.131058-2.483963 0.351195-3.705467 0.611264-1.266555 0.284642-2.534134 0.630718-3.710586 1.024916-1.046418 0.351195-2.273041 0.827305-3.494545 1.352562-1.047442 0.456656-2.158365 1.026964-3.230381 1.637204-0.980889 0.585667-2.11229 1.287033-3.158708 2.028331-1.181572 0.832425-2.118434 1.548125-2.99079 2.313997-1.356658 1.137545-2.247444 2.072358-3.144374 3.00922-0.72082 0.785326-1.637204 1.857341-2.508537 2.968264-0.805803 0.981913-1.481572 2.028331-2.202393 3.1198-0.89693 1.352562-1.462118 2.488059-2.097956 3.645057-0.545735 1.110923-1.19693 2.527991-1.80717 3.990109-0.265188 0.719796-0.721844 2.051881-1.136521 3.404443-0.480206 1.61775-0.785326 2.879186-1.026964 4.126287-0.30512 1.526624-0.49966 2.923213-0.630718 4.341304-0.17611 1.657682-0.260069 3.144374-0.260069 4.646424L176.5334 870.841042c0 1.486692 0.084983 2.968264 0.239591 4.410929 0.151536 1.637204 0.370649 3.00922 0.611264 4.360758 0.30512 1.50717 0.585667 2.70922 0.956316 3.90615 0.525257 1.832768 1.006486 3.164852 1.486692 4.451885 0.370649 0.830377 1.001367 2.22799 1.67816 3.55905 0.49966 0.981913 1.090446 2.137888 1.81229 3.204783 0.805803 1.267579 1.526624 2.337547 2.359048 3.359391 0.890786 1.156999 1.741641 2.163485 2.613998 3.099323 0.921503 0.941981 1.81229 1.832768 2.818776 2.710243 1.092493 0.956316 2.027307 1.697614 2.988742 2.377478 1.155975 0.826281 2.158365 1.462118 3.184306 2.028331 1.37304 0.805803 2.444031 1.332084 3.516047 1.81229 1.110923 0.501707 2.157341 0.916384 3.184306 1.241982 1.741641 0.590786 2.963145 0.895906 4.145741 1.155975 0.850855 0.17611 2.158365 0.4157 3.469972 0.545735 1.593177 0.19454 2.789083 0.215017 3.970655 0.215017l593.494163 0c1.221504 0 2.357001-0.020478 3.580552-0.17099 1.676112-0.17611 2.963145-0.4157 4.189768-0.656315 0.936862-0.219113 2.177819-0.49966 3.334818-0.91536 1.441641-0.461776 2.467581-0.850855 3.449494-1.31263 1.370992-0.61024 2.443007-1.155975 3.469972-1.741641 1.261436-0.721844 2.313997-1.397613 3.334818-2.118434 1.072015-0.764848 2.11741-1.611607 3.123896-2.462461 0.696247-0.636861 1.633109-1.50717 2.508537-2.444031 1.266555-1.291128 2.072358-2.293519 2.899664-3.338913 0.590786-0.766895 1.287033-1.702733 1.897273-2.708196 1.092493-1.67816 1.703757-2.749151 2.274065-3.861099 0.585667-1.136521 1.155975-2.332427 1.637204-3.555979 0.651196-1.616726 1.087374-2.879186 1.456999-4.189768 0.350171-1.176452 0.701366-2.508537 0.961435-3.884648 0.330717-1.67816 0.525257-3.1198 0.675769-4.601373 0.154608-1.462118 0.201707-2.944715 0.201707-4.431407L848.059434 242.172076c0-1.50205-0.046075-2.988742-0.201707-4.427311-0.150512-1.486692-0.370649-2.968264-0.651196-4.431407-0.284642-1.506146-0.635837-2.902735-1.024916-4.255297-0.351195-1.090446-0.766895-2.353929-1.287033-3.598982-0.635837-1.657682-1.247101-2.859732-1.832768-4.056662-0.504779-1.006486-1.136521-2.072358-1.81229-3.099323-1.072015-1.721163-1.723211-2.637547-2.423554-3.533453-0.675769-0.831401-1.547102-1.92287-2.527991-2.944715-1.006486-1.052561-1.92287-1.943348-2.884305-2.773725-0.871333-0.761776-1.917751-1.592153-2.988742-2.352905-1.131401-0.811947-2.2884-1.532767-3.510927-2.248468-0.741298-0.4157-1.857341-0.981913-3.033793-1.50717-1.266555-0.565189-2.488059-1.026964-3.73004-1.441641-0.830377-0.260069-2.11741-0.630718-3.42492-0.916384-1.311606-0.279523-2.508537-0.480206-3.73004-0.61024-1.311606-0.131058-2.597615-0.195563-3.975775-0.195563l-55.50726 0c-12.066573 0-21.821197-9.774078-21.821197-21.820173 0-12.043023 9.754624-21.821197 21.821197-21.821197l55.50726 0c2.859732 0 5.607859 0.136178 8.447113 0.441298 2.925261 0.306144 5.758371 0.782254 8.487045 1.37304 2.534134 0.544711 5.173729 1.266555 7.726293 2.072358 2.988742 1.006486 5.497279 1.988399 7.94131 3.078845 2.397956 1.066896 4.840964 2.2884 7.200012 3.639938 2.574066 1.526624 4.777482 2.923213 6.875438 4.431407 2.182939 1.526624 4.2297 3.184306 6.258031 4.93209 2.163485 1.852222 4.126287 3.775092 5.983628 5.73687 1.657682 1.767238 3.335842 3.73004 4.9925 5.783969 2.007853 2.553588 3.690109 4.906493 5.171681 7.394552 1.110923 1.638228 2.534134 4.101713 3.866218 6.655301 1.287033 2.53311 2.41741 5.062124 3.423896 7.63619 0.916384 2.208536 1.853245 4.846083 2.639595 7.550183 0.832425 2.88021 1.526624 5.653934 2.053928 8.402062 0.480206 2.639595 0.916384 5.41332 1.195906 8.226976 0.285666 2.859732 0.4157 5.757347 0.4157 8.72766l0 628.667942c0 2.949834-0.12901 5.867928-0.4157 8.707182-0.279523 2.834134-0.696247 5.627313-1.240958 8.376464-0.461776 2.579185-1.176452 5.34779-1.943348 8.031413-0.850855 2.903759-1.787716 5.587381-2.859732 8.206498-0.850855 2.222871-2.046761 4.775435-3.268265 7.22049-1.332084 2.553588-2.754271 5.062124-4.320826 7.439603-1.072015 1.767238-2.728673 4.101713-4.477482 6.329703-1.852222 2.313997-3.598982 4.386355-5.453251 6.304106-1.506146 1.637204-3.469972 3.515023-5.497279 5.302739-2.267922 1.942324-4.34028 3.624579-6.523219 5.151203-2.229014 1.592153-4.517414 3.054271-6.875438 4.386355-2.267922 1.306487-4.736527 2.548468-7.283971 3.684989-2.359048 1.092493-5.087722 2.137888-7.856327 3.010244-2.203417 0.746418-4.887039 1.461095-7.660764 2.072358-2.944715 0.61024-5.71844 1.072015-8.507523 1.355634C814.996921 956.771219 812.097258 956.901253 809.088038 956.901253L809.088038 956.901253zM809.088038 956.901253"
          fill="#ffffff"
        />
        <path
          d="M373.420759 272.483389c-14.465553 0-29.131789-7.265541-38.274125-19.006516-8.986704-11.521862-11.975447-25.811306-8.355987-40.191876l2.006829-8.095918c3.861099-15.402415 7.200012-28.801072 9.14336-36.832485 4.606492-19.157029 29.131789-41.452288 53.806574-41.452288l24.874444-0.046075 10.604455 0.046075 0.046075-0.17611c2.59352-10.585001 7.589091-30.767969 9.903088-39.126004 5.34779-19.091499 28.454996-39.665595 56.494292-39.665595l23.062154-0.045051 13.789784 0.045051c28.670014 0.065529 51.908278 20.794233 56.93047 39.971739 2.334475 8.707182 7.591139 28.344416 10.364864 39.014399l10.189778 0.020478 18.741328-0.039932c36.851939 0 56.098046 24.785366 60.13423 41.432834l10.95565 45.102464c3.553931 14.661117 0.565189 29.021209-8.402062 40.407917-9.03278 11.455309-23.327343 18.590816-37.332144 18.590816l-22.782632-0.020478c-64.540039-0.090103-242.720882-0.30512-254.697353 0L373.420759 272.483389 373.420759 272.483389zM416.620831 170.539533l-24.810963 0.045051c-3.028674 0.11058-10.143703 5.627313-11.780907 9.097285-1.612631 7.0495-4.996595 20.579215-8.857694 36.09221l-2.027307 8.116396c-0.370649 1.416043-0.154608 2.028331 0.436178 2.748127 1.130377 1.462118 3.099323 2.203417 3.859051 2.203417l0 21.820173 0.046075-21.820173c12.020498-0.325598 190.963117-0.105461 255.898379-0.020478l22.736557 0.020478c0.527305-0.065529 2.268946-0.871333 3.164852-2.092836 0.240615-0.325598 0.656315-0.935838 0.17611-3.00922l-10.995581-45.058437 0 0c-0.045051 0-3.404443-8.095918-17.330404-8.095918l-19.157029 0.045051-15.271357-0.045051c-16.844055 0-31.640326-11.632443-36.006203-28.280935-2.158365-8.421516-8.702062-33.056369-11.410258-43.179594-0.850855-1.701709-7.069978-7.506156-14.921185-7.52561l-13.639272-0.025597-23.062154 0.045051c-7.505132 0-13.574767 5.978508-14.620161 8.271004-2.072358 7.546088-6.874414 27.098339-9.428002 37.332144l-1.19693 4.822534c-4.255297 17.304807-18.987062 28.541003-37.487776 28.541003L416.620831 170.539533 416.620831 170.539533zM416.620831 170.539533"
          fill="#ffffff"
        />
        <path
          d="M659.833182 669.100432 533.878023 669.100432l0-68.019226 125.955159 0c6.11571 0 11.813672-2.327308 16.050539-6.563151 4.026969-4.057686 6.220147-9.397285 6.204788-15.006168 0.015358-5.608883-2.177819-10.948482-6.220147-14.976475-4.221509-4.26656-9.91947-6.592844-16.03518-6.592844L533.564712 557.942568l-0.581571-5.668269 142.423446-142.423446c8.695919-8.651892 8.93551-22.583997 0.53652-30.996297-3.937891-3.997276-9.263155-6.175096-15.006168-6.175096-6.011273 0-11.709235 2.357001-16.050539 6.682946L512.293345 511.909386 379.684933 379.361383c-4.296253-4.325946-9.978856-6.682946-15.990129-6.682946-5.727655 0-11.052919 2.177819-14.99081 6.145403-3.997276 3.967583-6.190454 9.308207-6.204788 15.065554 0 5.996938 2.386693 11.665207 6.712639 15.960436l141.497847 140.275319 0 7.816395L364.739174 557.941544c-6.100351 0-11.783979 2.327308-16.020846 6.592844-4.026969 4.057686-6.235505 9.367592-6.220147 14.976475 0 11.903774 9.994215 21.569319 22.28502 21.569319l125.925466 0 0 68.019226L364.739174 669.099409c-6.086017 0-11.769644 2.327308-16.020846 6.592844-4.026969 4.057686-6.235505 9.367592-6.220147 14.976475 0 11.903774 9.994215 21.569319 22.28502 21.569319l125.925466 0 0 88.93223c0 12.261113 9.680904 22.225634 21.584678 22.225634 11.903774 0 21.584678-9.964522 21.584678-22.225634l0-88.93223 125.955159 0c6.11571 0 11.813672-2.327308 16.050539-6.592844 4.026969-4.026969 6.220147-9.367592 6.204788-14.976475 0.015358-5.608883-2.193178-10.91879-6.220147-14.976475C671.631495 671.426716 665.933533 669.100432 659.833182 669.100432z"
          fill="#ffffff"
        />
      </svg>,
    ],
    [
      // 班级
      <svg
        className="icon mr-3"
        width="16px"
        height="16.00px"
        viewBox="0 0 1024 1024"
      >
        <path
          d="M507.904 557.568c32.768-35.328 52.736-82.432 52.736-134.144 0-108.032-88.064-196.096-196.096-196.096S168.448 315.904 168.448 423.936c0 51.712 20.48 99.328 53.248 134.144-20.992 12.288-40.448 27.136-58.368 45.056-53.76 53.76-83.456 125.44-83.456 201.728 0 46.08 11.264 78.848 34.816 100.352 37.376 33.792 93.184 28.16 157.696 21.504 29.696-3.072 60.416-6.144 92.672-6.144s62.976 3.072 92.672 6.144c25.088 2.56 49.152 5.12 71.168 5.12 34.304 0 64-6.144 86.528-26.624 23.552-20.992 34.816-53.76 34.816-100.352 0-76.288-29.696-147.456-83.456-201.728-17.92-17.92-37.376-33.28-58.88-45.568zM364.544 291.84C437.248 291.84 496.64 351.232 496.64 423.936c0 72.704-59.392 132.096-132.096 132.096S232.448 496.64 232.448 423.936C232.448 351.232 291.84 291.84 364.544 291.84z m208.384 565.248c-16.384 14.848-60.928 10.24-108.544 5.632-29.696-3.072-63.488-6.656-98.816-6.656s-69.12 3.584-98.816 6.656c-47.104 4.608-92.16 9.216-108.544-5.632-9.216-8.192-13.824-25.6-13.824-52.736 0-91.648 56.32-170.496 135.68-203.776 25.6 12.288 54.272 19.456 84.992 19.456 33.28 0 64.512-8.192 91.648-23.04-1.024 1.536-2.048 3.072-3.584 4.608 78.336 33.792 133.632 112.128 133.632 202.752-0.512 27.136-5.12 44.544-13.824 52.736z m285.696-390.144c-17.92-17.92-37.376-32.768-58.88-45.056 33.28-35.84 53.248-83.456 52.736-136.192-0.512-23.04-4.608-45.056-12.288-65.536v-0.512c-0.512-0.512-0.512-1.536-1.024-2.048-28.16-73.216-98.816-125.952-181.76-126.464-68.608-0.512-129.536 34.304-164.864 87.552-14.336 21.504 1.024 49.664 26.624 49.664 10.752 0 20.48-5.12 26.624-14.336 5.12-7.68 10.752-14.848 17.408-20.992 1.536-1.024 3.584-2.048 5.12-3.584 24.064-21.504 55.808-34.304 90.624-33.28 56.832 1.024 104.96 38.4 122.368 89.6 4.608 14.336 7.168 29.696 6.656 45.056-1.536 67.584-54.784 123.392-122.368 128.512-3.072 0-6.144 0.512-9.728 0.512-2.048 0-4.096 0-6.144 0.512-14.848 0-27.648 10.752-30.72 25.088v0.512c-4.096 18.944 10.24 37.376 29.696 37.888h7.68c30.72 0 59.904-7.168 85.504-19.456 78.336 33.792 136.192 113.664 136.192 204.288 0 26.624-4.608 44.544-13.824 52.736-16.384 14.848-60.928 10.24-108.544 5.632-9.216-1.024-28.672-2.56-29.184-2.56-17.408 0.512-31.232 14.336-31.232 31.744 0 17.408 13.824 31.744 31.232 31.744 0 0 15.36 1.536 22.528 2.56 25.088 2.56 49.152 5.12 71.168 5.12 34.304 0 64-6.144 86.528-26.624 23.552-20.992 34.816-53.76 34.816-100.352 0.512-76.8-29.184-147.968-82.944-201.728z"
          fill="#ffffff"
        />
      </svg>,
    ],
    [
      // 学生
      <svg
        className="icon mr-3"
        width="16px"
        height="16.00px"
        viewBox="0 0 1024 1024"
      >
        <path
          d="M517.12 5.76a22.4 22.4 0 0 0-28.8 0L128 198.4a35.2 35.2 0 0 0-12.8 27.52 38.4 38.4 0 0 0 17.28 30.08l142.08 92.16a17.28 17.28 0 0 0 7.68 4.48h10.24l-4.48 9.6a261.12 261.12 0 0 0-21.76 103.04A240 240 0 0 0 512 710.4a227.2 227.2 0 0 0 97.92-21.76h7.68a333.44 333.44 0 0 1 220.8 267.52v10.88H181.12v-10.88A335.36 335.36 0 0 1 320 725.76a32.64 32.64 0 0 0 8.96-43.52 23.68 23.68 0 0 0-19.2-11.52 50.56 50.56 0 0 0-24.96 4.48 384 384 0 0 0-169.6 320V1024H896v-28.8a392.96 392.96 0 0 0-208.64-345.6l-11.52-5.76 8.96-8.96a256 256 0 0 0 68.48-173.44 249.6 249.6 0 0 0-22.4-103.68l-3.84-7.68L873.6 256a37.76 37.76 0 0 0 12.8-27.52 35.84 35.84 0 0 0-13.44-27.52zM512 653.44a187.52 187.52 0 0 1-185.6-184.96A188.16 188.16 0 0 1 512 282.88a185.6 185.6 0 0 1 0 370.56z m181.12-353.92l-5.12-5.76A245.12 245.12 0 0 0 512 218.88a239.36 239.36 0 0 0-183.04 82.56L320 309.76l-7.68-8.32a8.32 8.32 0 0 0-4.48-3.84l-100.48-64L512 76.16l291.84 156.8z"
          fill="#ffffff"
        />
        <path
          d="M858.88 192a30.08 30.08 0 0 0-28.16 27.52v267.52h-3.2a44.16 44.16 0 0 0-17.28 35.84 48.64 48.64 0 1 0 96.64 0 44.16 44.16 0 0 0-17.28-35.84h-3.2V220.8a30.08 30.08 0 0 0-27.52-28.8z"
          fill="#ffffff"
        />
      </svg>,
    ],
    [
      // 成绩
      <svg
        className="icon mr-3"
        width="16px"
        height="16.00px"
        viewBox="0 0 1024 1024"
      >
        <path
          d="M937.6 243.2c12.4 0 22.4-10 22.4-22.4v-112c0-24.6-20.2-44.8-44.8-44.8H108.8C84.2 64 64 84.2 64 108.8v806.4c0 24.6 20.2 44.8 44.8 44.8h806.4c24.6 0 44.8-20.2 44.8-44.8V400c0-12.4-10-22.4-22.4-22.4-12.4 0-22.4 10-22.4 22.4v492.8c0 12.3-10.1 22.4-22.4 22.4H131.2c-12.3 0-22.4-10.1-22.4-22.4V131.2c0-12.3 10.1-22.4 22.4-22.4h761.6c12.3 0 22.4 10.1 22.4 22.4v89.6c0 12.4 10 22.4 22.4 22.4zM475.9 369c-0.6-1.4-1.5-2.5-2.3-3.7-0.8-1.2-1.5-2.5-2.5-3.5-0.9-0.9-2-1.5-3-2.2-1.4-1-2.7-1.9-4.2-2.6-0.3-0.1-0.5-0.4-0.8-0.5-1-0.4-2-0.2-3-0.4-1.6-0.3-3.1-0.7-4.7-0.7s-3.1 0.4-4.7 0.7c-1 0.2-2 0.1-3 0.4-0.3 0.1-0.5 0.4-0.8 0.5-1.6 0.6-2.9 1.6-4.2 2.6-1 0.7-2.1 1.3-3 2.2-1 1-1.7 2.3-2.6 3.5-0.8 1.2-1.7 2.4-2.3 3.7-0.1 0.3-0.4 0.6-0.6 0.9L311.8 706.7c-4.2 11.6 1.8 24.5 13.4 28.7 11.6 4.2 24.5-1.8 28.7-13.4l27.5-75.7h148l27.5 75.7c4.2 11.6 17.1 17.6 28.7 13.4 11.6-4.2 17.6-17.1 13.4-28.7L476.5 369.9c-0.2-0.3-0.4-0.5-0.6-0.9z m-78.2 232.6l57.7-158.5 57.7 158.5H397.7zM680 489.8c12.4 0 22.4-10 22.4-22.4v-56h56c12.4 0 22.4-10 22.4-22.4 0-12.4-10-22.4-22.4-22.4h-56v-56c0-12.4-10-22.4-22.4-22.4s-22.4 10-22.4 22.4v56h-56c-12.4 0-22.4 10-22.4 22.4 0 12.4 10 22.4 22.4 22.4h56v56c0 12.4 10 22.4 22.4 22.4z"
          fill="#ffffff"
        />
      </svg>,
      // 贫困
      <svg
        className="icon mr-3"
        width="16px"
        height="16.00px"
        viewBox="0 0 1024 1024"
      >
        <path
          d="M512 0C229.669 0 0 229.669 0 512s229.669 512 512 512 512-229.669 512-512S794.331 0 512 0z m0 965.486C261.851 965.486 58.514 762.149 58.514 512S261.851 58.514 512 58.514 965.486 261.851 965.486 512 762.149 965.486 512 965.486z"
          fill="#ffffff"
        />
        <path
          d="M708.023 687.543v-174.08H326.217v179.931h55.589V563.2H650.97v124.343zM552.96 282.33c26.331 20.48 57.051 39.498 92.16 58.515H393.509c27.794-16.092 52.662-35.109 76.068-58.515l-43.886-29.257C380.343 296.96 317.44 327.68 239.91 343.771l33.645 43.886c24.869-5.851 49.737-13.166 74.606-23.406v23.406h89.234c-24.868 38.034-83.383 61.44-178.468 73.143l21.943 49.737c115.565-16.091 185.782-57.051 213.577-121.417h137.508c0 13.166-1.463 26.331-2.925 38.034-2.926 11.703-10.24 17.555-23.406 17.555-32.183 0-65.829-1.463-102.4-2.926l11.703 46.811c36.571 1.463 65.828 1.463 89.234 1.463 36.571-1.463 58.514-13.166 70.217-32.183 8.777-19.017 14.629-49.737 16.092-93.623 19.017 8.778 40.96 17.555 65.828 26.332l29.257-46.812c-78.994-27.794-143.36-58.514-190.171-90.697l-42.423 29.257z"
          fill="#ffffff"
        />
        <path
          d="M488.594 580.754c-4.388 55.589-20.48 95.086-45.348 118.492-29.257 23.405-89.235 38.034-181.395 40.96l21.943 49.737c109.715-8.777 178.469-27.794 207.726-59.977 26.331-24.869 43.886-73.143 52.663-146.286l-55.589-2.926z m36.572 140.435c68.754 17.554 137.508 42.422 204.8 76.068l30.72-48.274c-64.366-27.794-133.12-51.2-207.726-70.217l-27.794 42.423z"
          fill="#ffffff"
        />
      </svg>,
      // 统计
      <svg
        className="icon mr-3"
        width="16px"
        height="16.00px"
        viewBox="0 0 1024 1024"
      >
        <path
          d="M331.840623 793.484755 331.840623 387.450978c0-16.191531-12.457456-28.645338-27.399836-28.645338L222.235197 358.80564c-14.94238 0-27.399836 13.698094-27.399836 28.645338L194.835361 793.484755 331.840623 793.484755 331.840623 793.484755zM506.210956 793.484755 506.210956 213.081861c0-16.192747-12.453808-29.89449-27.401052-29.89449l-82.20559 0c-14.94238 0-27.399836 13.701743-27.399836 29.89449L369.204478 793.484755 506.210956 793.484755 506.210956 793.484755zM680.580073 793.484755 680.580073 536.910048c0-16.191531-12.452591-29.889625-27.399836-29.889625L570.979512 507.020423c-14.947245 0-27.405918 13.698094-27.405918 29.889625L543.573595 793.484755 680.580073 793.484755 680.580073 793.484755zM854.94919 793.484755 854.94919 387.450978c0-16.191531-12.452591-28.645338-27.399836-28.645338l-82.200725 0c-14.947245 0-27.399836 13.698094-27.399836 28.645338L717.948794 793.484755 854.94919 793.484755 854.94919 793.484755zM879.860454 830.84861"
          fill="#ffffff"
        />
      </svg>,
      // 查询
      <svg
        className="icon mr-3"
        width="16px"
        height="16.00px"
        viewBox="0 0 1045 1024"
      >
        <path
          d="M229.83609 177.191812l461.985567 0 0 57.748052-461.985567 0 0-57.748052ZM228.296527 293.255001l461.985567 0 0 57.748052-461.985567 0 0-57.748052ZM114.341142 60.754415l692.976619 0 0 461.984413 57.748052 0 0-461.984413c0-31.893094-25.854958-57.748052-57.748052-57.748052l-692.976619 0c-31.893094 0-57.748052 25.854958-57.748052 57.748052l0 808.472722c0 31.893094 25.854958 57.748052 57.748052 57.748052l404.236361 0 0-57.748052-404.236361 0L114.341142 60.754415zM229.451488 524.241432l0 57.748052 140.452501 0c0-20.068603 2.939376-39.447694 8.386172-57.748052L229.451488 524.241432zM465.562482 408.745329 228.296527 408.745329l0 57.748052 175.543682 0C420.103216 443.180492 441.148916 423.454913 465.562482 408.745329zM902.807629 873.522437 770.391347 742.678057c30.443618-35.382231 48.851387-81.416668 48.851387-131.75449 0-111.626984-90.492352-202.11818-202.117026-202.11818-111.625829 0-202.11818 90.491197-202.11818 202.11818 0 111.624674 90.492352 202.11818 202.11818 202.11818 40.412086 0 78.049957-11.867225 109.631211-32.298485l135.217063 133.613977c11.275885 11.275885 29.557763 11.275885 40.833647 0C914.082359 903.0802 914.082359 884.799477 902.807629 873.522437zM472.754424 610.923567c0-79.73389 64.638549-144.370129 144.371284-144.370129 79.73158 0 144.368974 64.636239 144.368974 144.370129 0 79.73158-64.637394 144.370129-144.368974 144.370129C537.392973 755.293696 472.754424 690.655147 472.754424 610.923567z"
          fill="#ffffff"
        />
      </svg>,
    ],
  ];
  return (
    <React.Fragment>
      <span>{props.header}</span>
      {props.body.map((items, index) => {
        return (
          <Nav.Item as="li" key={index} className="menu-body">
            <Nav.Link eventKey={props.idx + "-" + index}>
              {svgArr[props.idx][index]}
              {items}
            </Nav.Link>
          </Nav.Item>
        );
      })}
    </React.Fragment>
  );
}

function SwitchButton(props) {
  const rightArrow = (
    <svg width="16px" height="16px" viewBox="0 0 1024 1024">
      <path
        d="M245.034251 895.239428l383.063419-383.063419L240.001631 124.07997l0.070608-0.033769c-12.709463-13.137205-20.530592-31.024597-20.530592-50.731428 0-40.376593 32.736589-73.111135 73.115228-73.111135 19.705807 0 37.591153 7.819083 50.730405 20.528546l0.034792-0.035816 438.686251 438.681134-0.035816 0.034792c13.779841 13.281491 22.3838 31.915897 22.3838 52.586682 0 0.071631 0 0.106424 0 0.178055 0 0.072655 0 0.10847 0 0.144286 0 20.669762-8.603959 39.341007-22.3838 52.623521l0.035816 0.033769L343.426165 1003.661789l-0.180102-0.179079c-13.140275 12.565177-30.950919 20.313651-50.588165 20.313651-40.378639 0-73.115228-32.736589-73.115228-73.114205C219.544717 928.512229 229.432924 908.664182 245.034251 895.239428z"
        fill="#ffffff"
      />
    </svg>
  );
  const leftArrow = (
    <svg width="16px" height="16px" viewBox="0 0 1024 1024">
      <path
        d="M778.965749 128.759549l-383.064442 383.063419 388.097062 388.096039-0.070608 0.033769c12.709463 13.137205 20.529569 31.024597 20.529569 50.731428 0 40.376593-32.736589 73.112158-73.115228 73.112158-19.705807 0-37.591153-7.819083-50.730405-20.528546l-0.034792 0.035816L241.890654 564.622498l0.035816-0.035816c-13.779841-13.281491-22.3838-31.915897-22.3838-52.585659 0-0.071631 0-0.106424 0-0.178055 0-0.072655 0-0.10847 0-0.144286 0-20.669762 8.603959-39.341007 22.3838-52.622498l-0.035816-0.034792L680.573835 20.337187l0.180102 0.179079c13.139252-12.5662 30.950919-20.313651 50.587142-20.313651 40.378639 0 73.115228 32.736589 73.115228 73.114205C804.455283 95.485725 794.567076 115.334795 778.965749 128.759549z"
        fill="#ffffff"
      />
    </svg>
  );
  const arrow = props.state ? rightArrow : leftArrow;
  const animation = props.state
    ? props.animation.slideLeft
    : props.animation.slideRight;
  return (
    <button className="switch-button" style={animation} onClick={props.click}>
      {arrow}
    </button>
  );
}

function Head(props) {
  if (props.pretitle !== "班级层面" && props.pretitle !== "学生层面") {
    return (
      <div className="header-body">
        <div className="row">
          <div className="col">
            <h6 className="header-pretitle">{props.pretitle}</h6>
            <h1 className="header-title">{props.title}</h1>
          </div>
        </div>
      </div>
    );
  }
  return <React.Fragment></React.Fragment>;
}

export default Main;
